<template>
    <div class="news">
        <div class="nav-title">
            <img src="@/img/pic4.jpg">
            <h1>业界新闻</h1>
        </div>
        <div class="supply">
            <el-row>
                <el-col :lg="18" :sm="24" :xs="24">
                    <div class="hzgs-title">
                        <h2 class="title">最新资讯<span>NEWS</span></h2>
                        <ul>
                            <li v-for="(item,index) in newstype" :key="item.tid" :class="num==index?'active':''"@click="tabfun(index)">{{ item.typename }}</li>
                        </ul>
                    </div>
                    <div class="news-content">
                        <div v-if="num==0">
                            <el-row v-for="item in news.news1" :key="item.id">
                                <el-col :lg="8"><div><img :src="item.msgpic"></div></el-col>
                                <el-col :lg="16">
                                    <h2><router-link :to="`/newsli?id=${item.id}`">{{item.title}}</router-link></h2>
                                    <p>{{item.intro}}</p>
                                </el-col>
                            </el-row>
                        </div>
                        <div v-if="num==1">
                            <el-row v-for="item in news.news2" :key="item.id">
                                <el-col :lg="8"><div><img :src="item.msgpic"></div></el-col>
                                <el-col :lg="16">
                                    <h2><router-link :to="`/newsli?id=${item.id}`">{{item.title}}</router-link></h2>
                                    <p>{{item.intro}}</p>
                                </el-col>
                            </el-row>
                        </div>
                        <div v-if="num==2">
                            <el-row v-for="item in news.news3" :key="item.id">
                                <el-col :lg="8"><div><img :src="item.msgpic"></div></el-col>
                                <el-col :lg="16">
                                    <h2><router-link :to="`/newsli?id=${item.id}`">{{item.title}}</router-link></h2>
                                    <p>{{item.intro}}</p>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
                <el-col :lg="6" :sm="24" :xs="24">
                    <div class="sort">
                    <h1>物流查询</h1>
                    <ul>
                        <li v-for="item in assitant" :key="item.id">
                            <a :href="item.address">{{ item.aname }}</a>
                        </li>
                    </ul>
                </div>
                <div class="tgfw">
                    <h1>供需信息</h1>
                    <el-row>
                        <el-col :lg="24" :sm="24" :xs="24" v-for="item in orders.purchase" :key="item.orderid"><div>
                            <img :src="item.img1">
                            <div class="box-font">
                                <h3>{{item.goodsname}}</h3>
                                <p>{{item.orderNameen}}</p>
                                <router-link :to="`/pdetails?id=${item.orderid}`">
                                    <el-button type="danger" round>采购订单</el-button>
                                </router-link>
                            </div>
                        </div></el-col>
                    </el-row>
                    <el-row>
                        <el-col :lg="24" :sm="24" :xs="24" v-for="item in orders.supply" :key="item.orderid"><div>
                            <img :src="item.img1">
                            <div class="box-font">
                                <h3>{{item.goodsname}}</h3>
                                <p>{{item.orderNameen}}</p>
                                <router-link :to="`/sdetails?id=${item.orderid}`">
                                    <el-button type="success" round>供应订单</el-button>
                                </router-link>
                            </div>
                        </div></el-col>
                    </el-row>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import {toRefs,reactive,onMounted,getCurrentInstance} from 'vue'
export default {
    setup(){
        const data = reactive({
            num:0,
            assitant:[],//国际物流
            orders:{},//供需信息
            newstype:[],//新闻类别
            news:[],//新闻内容
        })
        const tabfun=(value)=>{
            data.num=value
        }
        const {proxy}=getCurrentInstance()
        onMounted(async()=>{
            //国际物流
            await proxy.$axios.get("/api/assitant",{params:{}})
            .then(function(response){
                var arr=JSON.parse(response.data)
                console.log(arr)
                data.assitant=arr
            })
            .catch(function(error){
                console.log(error);
            });
            //提供服务 
            await proxy.$axios.get("/api/orders", { params: {} })
            .then(function (response) {
                var arr = JSON.parse(response.data)
                for (var obj in arr) {
                    for (var v of arr[obj]) {
                        v.img1 = `/src/${v.img1}`
                    }
                }
                data.orders = arr
            })
            //新闻类别
            await proxy.$axios.get("/api/newstype",{params:{}})
            .then(function(response){
                var arr=JSON.parse(response.data)
                console.log(arr)
                data.newstype=arr
            })
            .catch(function(error){
                console.log(error);
            });
            //新闻信息
            await proxy.$axios.get("/api/news", { params: {} })
            .then(function (response) {
                var arr = JSON.parse(response.data)
                console.log(arr)
                for (var obj in arr) {
                    for (var v of arr[obj]) {
                        v.msgpic = `/src/${v.msgpic}`
                    }
                }
                data.news = arr
            })
        })
        return {
            ...toRefs(data),tabfun
        }
    }
}
</script>
<style scoped>
.sort ul{border:1px solid skyblue;}
.sort ul li{border-bottom:2px dashed #333;}
.supply{box-shadow:1px 1px 5px #ccc;}
.supply .hzgs-title .title{border:10px}
.supply .hzgs-title ul li:hover{background-color:skyblue;color:white; font-size: large;}
.supply .hzgs-title ul .active{background-color:blue;color:white;}
.news-content{padding:15px;}
.news-content .el-row .el-col div{border:1px solid #ccc;padding: 2px;}
.news-content .el-row .el-col img{width:100%;height:auto;}
.news-content .el-row .el-col h2 a{color:rgb(7,108,222);padding: 10px;}
.news-content .el-row .el-col .h2 a:hover{text-decoration: underline;}
.news-content .el-row .el-col p{text-indent: 24px;line-height:24px ;padding: 10px 20px;}
.news-content .el-row .el-col h2{padding:10px 20px;}
.news-content>.items{display:block;}
.news-content .el-row{margin:15px 0px;}
</style>